<template>
<div class="home-banner">
    <div class="banner-img" :style="{ 'background-image': `url(${src})` }">
        <template v-if="isHome">
            <div class="focusinfo">
                <div class="header-info">
                    <h3>{{ websiteInfo.sloTitle }}</h3>
                    <p>{{ websiteInfo.slogan }}</p>
                </div>
                <!-- 社交信息 -->
                <ul class="top-social">
                    <li v-for="item in socials" :key="item.id" :title="item.title">
                        <a :href="item.href" target="_blank" :style="{ color: item.color }"><i class="iconfont" :class="item.icon"></i></a>
                    </li>
                </ul>
            </div>
            <!--左右倾斜-->
            <div class="slant-left"></div>
            <div class="slant-right"></div>
        </template>
        <div class="banner-slot" v-else>
            <slot></slot>
        </div>
        <div class="gradient"></div>
    </div>
</div>
</template>

<script>
import bgImg from "@/assets/images/contact-bg.jpg";
export default {
    name: "banner",
    data() {
        return {
            websiteInfo: {},
            socials: [],
        };
    },
    props: {
        src: {
            type: String,
            default: bgImg,
        },
        isHome: {
            type: [Boolean, String],
            default: false,
        },
    },
    created() {
        this.getWebSiteInfo();
        this.getSocial();
    },
    methods: {
        getSocial() {
            this.$store.dispatch("getSocials").then((data) => {
                this.socials = data;
            });
        },
        getWebSiteInfo() {
            this.$store.dispatch("getSiteInfo").then((data) => {
                this.websiteInfo = data;
            });
        },
    },
};
</script>

<style lang="less" scoped>
.home-banner {
    position: relative;
    width: 100%;

    .banner-img {
        width: inherit;
        height: inherit;
        padding: 30px 10px;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        transition: all 0.2s linear;
        overflow: hidden;

        &:hover {
            transform: scale(1.1, 1.1);
            filter: contrast(130%);
        }

        .banner-slot {
            position: relative;
            z-index: 1;
        }
    }

    &.home-banner {
        .banner-img {
            background-position: center center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;
            z-index: -1;
            transition: unset;

            &:hover {
                transform: unset;
                filter: unset;
            }
        }

        .slant-left,
        .slant-right {
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            bottom: -2px;
            z-index: 1;
        }

        .slant-left {
            left: -2px;
            border-bottom: 110px solid #fff;
            border-right: 800px solid transparent;
        }

        .slant-right {
            right: -2px;
            border-bottom: 110px solid #fff;
            border-left: 800px solid transparent;
        }
    }
}

.focusinfo {
    position: relative;
    max-width: 436px;
    padding: 160px 10px 200px;
    margin: auto;
    text-align: center;
    z-index: 1;

    .header-info {
        margin-bottom: 20px;
        font-size: 18px;
        letter-spacing: 1px;
        line-height: 30px;
        color: rgba(255, 255, 255, 0.8);

        h3 {
            margin-bottom: 18px;
            color: #fff;
            font-size: 28px;
        }
    }

    .top-social {
        display: inline-block;
        height: 32px;
        margin-top: 30px;
        margin-left: 10px;
        list-style: none;

        li {
            float: left;
            margin-right: 10px;
            height: 32px;
            line-height: 32px;
            text-align: center;
            width: 32px;
            background: white;
            border-radius: 100%;
        }
    }
}
</style>
